<template>
  <view>
    <swiper
      class="swiper"
      :indicator-dots="indicatorDots"
      :autoplay="autoplay"
      :interval="interval"
      :duration="duration"
      indicator-active-color="rgb(95, 137, 216)"
      indicator-color="#fff"
      :circular="true"
      previous-margin="5px"
      next-margin="20px"
    >
      <!-- :easing-function="easeOutCubic" -->
      <swiper-item
        v-for="(item, index) in swiperList"
        :key="index"
        class="containerItem"
        @click="goDetail(item.relation)"
      >
        <image :src="item.imgUrl" alt="" class="containerimg" />
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";

export default {
  data() {
    return {
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 1200,
    };
  },
  computed: {
    ...mapState({
      swiperList: (state) => state.home.swiperList,
    }),
    // ...mapState("home", ["swiperList"]),
  },
  methods: {
    //同步
    ...mapMutations({
      swiperData: "home/swiperData",
    }),
    //异步
    ...mapActions({
      getswiper: "home/getswiper",
    }),
    ...mapActions("home", ["getswiper"]),
    goDetail(id) {
      console.log(id);
      uni.navigateTo({
          url: `/pages/prod/prod?id=${id}`,
      });
    },

  },
  mounted() {
    this.getswiper();
  },
};
</script>

<style>
.swiper {
  width: 768rpx;
  height: 360rpx;
  padding: 10rpx 0;
  box-shadow: 12rpx 0rpx 0rpx 12rpx rgba(238, 221, 221, 0.288);
}
.containerItem {
  text-align: center;
  width: 768rpx;
  line-height: 360rpx;
  /* box-shadow: 15rpx 0rpx 0rpx 15rpx rgba(240, 67, 67, 0.288); */
  border-radius: 8px;
}
.containerimg {
  border-radius: 8px;
  display: inline-block;
  margin: 0 20rpx;
}
</style>
